<template>
  <DateTab
    :tabData="data.formData"
    @data="getTab"
    @changeDate="getTab"
  ></DateTab>
  <div class="edit-line"></div>
  <div class="card">
    <div class="icon-top"></div>
    <div class="card-content com-head-wrap1">
      <div class="card-data">
        <div class="card-item">
          <div class="iconfont icon-charging-capacity"></div>
          <div class="right">
            <div class="title">充电度数（度）</div>
            <div class="title">
              {{
                data.detailData?.power
                  ? formatNumber(data?.detailData?.power)
                  : '--'
              }}
            </div>
          </div>
        </div>
        <div class="card-item">
          <div class="iconfont icon-electricity-fee"></div>
          <div class="right">
            <div class="title">实收电费（元）</div>
            <div class="title">
              {{
                data.detailData?.powerAmount
                  ? formatNumber(data?.detailData?.powerAmount)
                  : '--'
              }}
            </div>
          </div>
        </div>
        <div class="card-item">
          <div class="iconfont icon-service-fee"></div>
          <div class="right">
            <div class="title">实收服务费（元）</div>
            <div class="title">
              {{
                data.detailData?.serviceAmount
                  ? formatNumber(data.detailData.serviceAmount)
                  : '--'
              }}
            </div>
          </div>
        </div>
        <div class="card-item">
          <div class="iconfont icon-dividend"></div>
          <div class="right">
            <div class="title">
              运营商分润（元）
              {{
                data.detailData?.channelShareAmount
                  ? formatNumber(data?.detailData?.channelShareAmount)
                  : '--'
              }}元
            </div>
            <div class="title">
              其他方分润（元）
              {{
                data.detailData?.otherShareAmount
                  ? formatNumber(data.detailData?.otherShareAmount)
                  : '--'
              }}元
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="icon-bottom"></div>
  </div>
  <Table ref="tableRef" :columns="data.columns" @get-list="getData"></Table>
</template>
  
<script lang="ts" setup name="dividendSummaryList">
import Table from '@/components/table/index.vue';
import DateTab from '@/components/dateTab/index.vue';
import { pagingTotalRecord, getTotalInfo } from '@/service/apis/financial';
import { formatNumber } from '@/utils/utils';

const router = useRouter();

const tableRef = ref();

const data = reactive({
  formData: {} as any,
  detailData: {} as any,
  columns: [
    {
      prop: 'channelName',
      label: '平台运营商',
    },
    {
      prop: 'orgName',
      label: '运营商名称',
      clickFun: (row: any) => {
        if (row.orgId) {
          router.push({
            name: 'dividendSummaryDetail',
            query: {
              id: row.orgId,
              timeType: data.formData.timeType,
              time: data.formData.time,
            },
          });
        }
      },
    },
    {
      prop: 'power',
      label: '充电电量',
    },
    {
      prop: 'powerAmount',
      label: '实收电费',
    },
    {
      prop: 'serviceAmount',
      label: '实收服务费',
    },
    {
      prop: 'channelShareAmount',
      label: '运营商分润金额',
    },
    {
      prop: 'otherShareAmount',
      label: '其他方分润总额',
    },
  ],
});

const getTab = (value: any) => {
  data.formData = value;
  tableRef.value?.handleQuery();
};

const getData = (page: any, search: any) => {
  nextTick(() => {
    pagingTotalRecord(data.formData, page).then((res: any) => {
      if (res) {
        if (
          page.pageNo !== 1 &&
          (!res.dataList || res.dataList?.length === 0)
        ) {
          page.pageNo--;
          getData(page, search);
          return;
        }
        nextTick(() => {
          tableRef.value.setTable({
            total: res.totalCount,
            table: res.dataList,
          });
        });
      }
    });
    getTotalInfo(data.formData, page).then((res: any) => {
      if (res) {
        data.detailData = res;
      } else {
        data.detailData = {};
      }
    });
  });
};
</script>
<style lang="scss" scoped>
@import '@/assets/styles/head.scss';
.card {
  padding: 30px 0;
  margin: 20px 0;
  .card-content {
    width: 100%;
    .card-data {
      .card-item {
        display: flex;
        text-align: left;
        .title {
          margin-left: 12px;
        }
        .iconfont {
          font-size: 56px;
        }
      }
    }
  }
}
</style>